<!--
 * @Author: JunyaoPan
 * @Date: 2021-09-17 15:04:46
 * @LastEditors: JunyaoPan
 * @LastEditTime: 2021-10-14 20:28:47
 * @Description: 
-->
<template>
  <div class="header">
    <!-- 顶部2层导航 -->
    <div class="header_top">
      <div class="wrapper">
        <!-- 顶部 上左 -->
        <div class="header_top_left">
          <img @click="toHome" src="../../assets/logo.png" width="400px" />
        </div>
        <!-- 顶部 上右 -->
        <div class="header_top_right">
          <div class="div1">
            <div><a href="http://www.gzhu.edu.cn/">广大主页</a></div>
            <div @click="toHome">新闻首页</div>
          </div>
          <div class="div2">
            <input type="text" v-model="search" />
            <button @click="toSearch(search)">
              <img
                src="http://news.gzhu.edu.cn/images/search.png"
                width="36px"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="header_bottom">
      <div class="wrapper">
        <!-- 第2层顶部 上左 -->
        <ul v-for="item in allType" :key="item.id">
          <li @click="toDetailList(item.id)">{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      search: "",
      allType:[]
    };
  },
  created(){
    this.getAlltype()
  },
  methods: {
    async getAlltype() {
      var res = await get("/index/category/findAll");
      this.allType = res.data;
    },
    async toSearch(search) {
      this.$router.push({
        path: "/Search",
        query: { search },
      });
      // 刷新页面
      setTimeout(()=>{
        this.$router.go(0);
      },100)
    },
    // 首页
    toHome() {
      this.$router.push({
        path: "/",
      });
    },
    // 跳转详情页
    toDetailList(categoryId) {
      this.$router.push({
        path: "/DetailList",
        query: { categoryId },
      });
      // 刷新页面
      setTimeout(()=>{
        this.$router.go(0);
      },100)
    },
    
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0 auto;
  padding: 0;
}
a{
  color: white;
}
.header {
  background-image: url(../../assets/bg-top.png);
  color: white;
  font-family: 宋体;
  border: 1px solid;
  height: 180px;
  .header_top {
    .wrapper {
      width: 1100px;
    }
    height: 120px;
    .header_top_left {
      margin-top: 30px;
      float: left;
    }
    .header_top_right {
      margin-top: 35px;
      float: right;
      .div1 {
        height: 35px;
        div {
          float: right;
          margin-right: 20px;
          font-size: 16px;
        }
      }
      .div2 {
        display: flex;
        justify-content: flex-end;
      }
      input:focus {
        outline: none;
      }
      input {
        background-color: green;
        height: 35px;
        width: 300px;
        font-size: 20px;
        color: white;
        border: 1px solid rgba(245, 245, 245, 0.438);
      }
      button {
        border: none;
        background: none;
      }
    }
  }
  .header_bottom {
    .wrapper {
      display: flex;
      width: 1100px;
    }
    ul {
      justify-content: space-between;
      align-items: center;
      height: 60px;
    }
    ul li {
      list-style: none;
      font-size: 20px;
      height: 50px;
      font-weight: 800;
      line-height: 50px;
    }
    li:hover {
      border-bottom: 2px solid rgb(185, 126, 36);
      cursor: pointer;
    }
  }
}
</style>